<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-gradual-orange-pro" :isBack="true" fatherCss="box-shadow: none;">
			<block slot="backText"></block>
			<block slot="content">积分欢乐购</block>
		</cu-custom>
		<view class="swiper-scord">
			<view class="layer-bg bg-gradual-orange-pro"></view>
			<view class="content">
				<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="false" :circular="true"
				 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#f27714"
				 indicator-active-color="#f27714">
					<swiper-item v-for="(item,index) in boutiqueList" :key="index" :class="cardCur==index?'cur':''"  @click="nav" :data-url="'/pages/cloudMall/productDetail?id='+item.id">
						<view class="swiper-item">
							<!-- <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
							<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
							<image :src="item.goodsImg" mode="aspectFill" class="left-img"></image>
							<view class="right-cont">
								<view>{{item.goodsName}}</view>
								<view class="">
									立即加购
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="profuct-list">
			<view class="recommend">
				<view class="title">为您推荐</view>
				<view class="list">
					<view class="zero-item" v-for="(item,index) in recommendList" :key="index" @click="nav" :data-url="'/pages/cloudMall/productDetail?id='+item.id">
						<view class="zero-content">
							<image :src="item.goodsImg" mode=""></image>
							<view class="zer-info">
								<view class="text-cut">{{item.goodsName}}</view>
								<view>
									<text class="text-colorP text-price" v-if="item.shopPrice!=0">{{item.shopPrice}}</text>
									<text class="text-colorP" v-if="item.integral!=0 && item.shopPrice!=0">+</text>
									<text class="text-colorP" v-if="item.integral!=0">{{item.integral}}</text>
									<text v-if="item.integral!=0" style="color: #333333;font-size: 24rpx;">积分</text>
								</view>
								<view class="">市场价：<text class="text-price">{{item.marketPrice}}</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="wai-title">其他兑换</view>
		<view class="tui-container">
			<view class="tui-extend-box">
				<block v-for="(item,index) in otherList" :key="index" v-if="(index+1)%2!=0">
					<view class="zero-item-wai tui-extend-item" @click="nav" :data-url="'/pages/cloudMall/productDetail?id='+item.id">
						<image :src="item.goodsImg" mode=""></image>
						<view class="zer-info">
							<view class="two-cut">{{item.goodsName}}</view>
							<view>
								<text class="text-colorP text-price" v-if="item.shopPrice!=0">{{item.shopPrice}}</text>
								<text class="text-colorP" v-if="item.integral!=0 && item.shopPrice!=0">+</text>
								<text class="text-colorP" v-if="item.integral!=0">{{item.integral}}</text>
								<text v-if="item.integral!=0" style="color: #333333;font-size: 24rpx;">积分</text>
							</view>
							<view class="">市场价：<text class="text-price">{{item.marketPrice}}</text></view>
						</view>
					</view>
				</block>
			</view>
			<view class="tui-extend-box">
				<block v-for="(item,index) in otherList" :key="index" v-if="(index+1)%2==0">
					<view class="zero-item-wai tui-extend-item" @click="nav" :data-url="'/pages/cloudMall/productDetail?id='+item.id">
						<image :src="item.goodsImg" mode=""></image>
						<view class="zer-info">
							<view class="two-cut">{{item.goodsName}}</view>
							<view>
								<text class="text-colorP text-price" v-if="item.shopPrice!=0">{{item.shopPrice}}</text>
								<text class="text-colorP" v-if="item.integral!=0 && item.shopPrice!=0">+</text>
								<text class="text-colorP" v-if="item.integral!=0">{{item.integral}}</text>
								<text v-if="item.integral!=0" style="color: #333333;font-size: 24rpx;">积分</text>
							</view>
							<view class="">市场价：<text class="text-price">{{item.marketPrice}}</text></view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<tui-divider width="60%" :gradual="true" v-if="noMoreShow">更多没有啦~</tui-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				cardCur: 0,
				dotStyle: true,
				boutiqueList: [],
				recommendList: [],
				otherList: [],
				page: 1,
				lastPage: '',
				noMoreShow: false
			}
		},
		onLoad() {
			this.getBoutique()
			this.getRecommend()
			this.getAll()
		},
		onReachBottom() {
			if (this.page > this.lastPage) {
				this.noMoreShow = true
				return
			}
			this.getAll()
		},
		methods: {
			// 路由跳转
			nav(e) {
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url
					});
				}
			},
			// 积分欢乐购(所有)
			getAll() {
				var that = this;
				this.$request({
					url: '/ShopGoods/get_shop_goods',
					data: {
						shopId: '2',
						page: this.page,
						goodsCatId: 5
					},
					success: res => {
						if (res.data.status == 1) {
							var resultList = res.data.data.data
							that.page++
							that.lastPage = res.data.data.pageCount
							resultList.forEach(itme => {
								that.otherList.push(itme)
							})
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 积分欢乐购(精品)
			getBoutique() {
				var that = this;
				this.$request({
					url: '/ShopGoods/get_shop_goods',
					data: {
						shopId: '2',
						page: 1,
						isBest: 1,
						goodsCatId: 5
					},
					success: res => {
						if (res.data.status == 1) {
							that.boutiqueList = res.data.data.data
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 积分欢乐购(推荐)
			getRecommend() {
				var that = this;
				this.$request({
					url: '/ShopGoods/get_shop_goods',
					data: {
						shopId: '2',
						page: 1,
						isRecom: 1,
						goodsCatId: 5
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.data.length > 6) {
								res.data.data.data.length = 6
							}
							that.recommendList = res.data.data.data
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
		}
	}
</script>

<style scoped>
	.swiper-scord {
		width: 100%;
		height: 335rpx;
		position: relative;
	}

	.swiper-scord .layer-bg {
		width: 100%;
		height: 210rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.content {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.profuct-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 24rpx 0;
	}

	.profuct-list .recommend {
		width: 100%;
		background-color: #ffffff;
		box-shadow: 0rpx 4rpx 13rpx 1rpx rgba(173, 173, 173, 0.3);
		border-radius: 8rpx;
		padding: 13rpx 20rpx 0;
		box-sizing: border-box;
	}

	.profuct-list .recommend .title {
		line-height: 62rpx;
		width: 100%;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-weight: bold;
	}

	.profuct-list .recommend .list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}


	.zero-item {
		width: 320rpx;
		height: 440rpx;
		position: relative;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		/* box-shadow: 2rpx 4rpx 10rpx 0rpx rgba(205, 205, 205, 0.5); */
	}

	.zero-item-wai {
		width: 340rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 2rpx 4rpx 10rpx 0rpx rgba(205, 205, 205, 0.5);
	}

	.zero-item-wai image {
		width: 340rpx;
		height: 300rpx;
		border-radius: 8rpx;
	}

	.zero-item-wai .zer-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 12rpx 12rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.zero-item-wai .zer-info view:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.zero-item-wai .zer-info .two-cut {
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-bottom: 10rpx;
	}

	.zero-item-wai .zer-info view:nth-child(2) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
	}

	.zero-item-wai .zer-info view:nth-child(3) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #999999;
	}

	.zero-item-wai .zer-info view:nth-child(3) text {
		text-decoration: line-through;
	}

	.zero-item .zero-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 8rpx;
	}

	.zero-item .zero-content image {
		width: 320rpx;
		height: 300rpx;
		border-radius: 8rpx;
	}

	.zero-item .zero-content .zer-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 12rpx 12rpx;
		box-sizing: border-box;
	}

	.zero-item .zero-content .zer-info view:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.zero-item .zero-content .zer-info .two-cut {
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.zero-item .zero-content .zer-info view:nth-child(2) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
	}

	.zero-item .zero-content .zer-info view:nth-child(3) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #999999;
	}

	.zero-item .zero-content .zer-info view:nth-child(3) text {
		text-decoration: line-through;
	}

	.wai-title {
		letter-spacing: 1rpx;
		color: #333333;
		font-size: 30rpx;
		margin-top: 10rpx;
		line-height: 90rpx;
		padding-left: 24rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.other-list {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.other-list .list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	/* 瀑布流列表 */
	.tui-container {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
</style>

<style>
	.card-swiper {
		height: 335rpx !important;
	}

	.card-swiper swiper-item {
		padding: 30rpx 0 60rpx !important;
	}

	.card-swiper swiper-item .swiper-item {
		padding: 20rpx !important;
		box-sizing: border-box;
		background: #fff !important;
		border-radius: 8rpx;
		display: flex;
		box-shadow: 0px 6rpx 15rpx 1rpx rgba(242, 119, 20, 0.35) !important;
	}

	.card-swiper swiper-item .swiper-item .left-img {
		width: 187rpx;
		height: 200rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.card-swiper swiper-item .swiper-item .right-cont {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.card-swiper swiper-item .swiper-item .right-cont>view:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		line-height: 58rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.card-swiper swiper-item .swiper-item .right-cont>view:nth-child(2) {
		align-self: flex-end;
		width: 143rpx;
		height: 48rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		border: solid 1rpx #f27714;
		text-align: center;
		color: #f27714;
		font-size: 24rpx;
		line-height: 48rpx;
	}
</style>
